<template>
  <div class="demand">
    <el-row class="demand-tree">
      <el-col :xl="11" :lg="11" :md="11" :sm="24" :xs="24">
        <el-input v-model="filterText" style="width: 240px" placeholder="请输入关键字" />
        <el-button type="primary" plain style="margin-left: 10px" @click="view()">预览</el-button>
        <el-tree
          :data="dataSource"
          ref="treeRef"
          node-key="id"
          default-expand-all
          :expand-on-click-node="false"
          :filter-node-method="filterNode"
          :props="defaultProps"
          class="tree"
          :highlight-current="true"
          :indent="22"
          @node-click="handleNodeClick"
        >
          <template #default="{ node, data }">
            <!-- 非叶子 -->
            <span
              v-if="!node.isLeaf"
              style="display: flex; align-items: center"
              :class="{ current: defaultId == data.id }"
            >
              <span @click.stop="node.expanded = !node.expanded">
                <el-icon v-if="node.expanded" style="margin: 0 6px 0 2px" size="16">
                  <FolderOpened />
                </el-icon>
                <el-icon v-else style="margin: 0 6px 0 2px" size="16">
                  <Folder />
                </el-icon>
              </span>
              <small>{{ node.label }}</small>
              <span v-if="data.demandNum > 0" class="num"> （{{ data.demandNum }}） </span>
            </span>
            <!-- 叶子 -->
            <span v-else style="display: flex; align-items: center">
              <el-icon style="margin: 0 6px 0 2px" size="16">
                <Document />
              </el-icon>
              <small>{{ node.label }}</small>
            </span>
          </template>
        </el-tree>
      </el-col>
      <el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
        <el-form ref="formRef" :model="formData" label-width="100px">
          <el-form-item label="名称:" prop="name">
            {{ formData.name }}
          </el-form-item>
          <el-form-item label="标识:" prop="code">
            {{ formData.code }}
          </el-form-item>
          <el-form-item label="描述:" prop="description">
            {{ formData.description }}
          </el-form-item>
          <el-form-item label="状态:" prop="status">
            {{ formData.status }}
          </el-form-item>
          <el-form-item label="开发责任人:" prop="developerId">
            {{ formData.developerId }}
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <ViewCom ref="viewRef" />
  </div>
</template>

<script setup lang="ts">
import * as DemandApi from '@/api/demand'
import { FolderOpened, Folder, Document } from '@element-plus/icons-vue'
import ViewCom from './View.vue'
import { useAppStore } from '@/store/modules/app'
const appStore = useAppStore()
const projectId = computed(() => appStore.getSelectProject)
const { currentRoute } = useRouter() // 路由对象
const { query } = unref(currentRoute)
const loading = ref(false) // 列表的加载中
const dataSource = ref([] as any)
const statusList = ref([] as any)
const dutyList = ref([] as any)
const filterText = ref('')
const treeRef = ref()
const formData = ref({} as any)
const defaultId = ref('')
const defaultProps = {
  children: 'children',
  label: 'name',
  disabled: 'disabled'
}
watch(filterText, (val) => {
  treeRef.value!.filter(val)
})
// 过滤
const filterNode = (value, data) => {
  if (!value) return true
  return data.name.includes(value) || data.code.includes(value)
}

// 获取树列表
const getList = async () => {
  loading.value = true
  try {
    const data = await DemandApi.getDemandTree({ id: query.id })
    dataSource.value = [data]
    handleNodeClick(dataSource.value[0])
    defaultId.value = data.id
  } finally {
    loading.value = false
  }
}
// 获取状态列表
const getStatusList = () => {
  statusList.value = [
    {
      label: '新建',
      value: 1
    },
    {
      label: '测试中',
      value: 2
    },
    {
      label: '测试通过',
      value: 3
    },
    {
      label: '测试不通过',
      value: 4
    },
    {
      label: '禁用',
      value: 5
    }
  ]
}
// 获取开发责任人列表
const getDutyList = async () => {
  let data = await DemandApi.getProjectDevMember({ projectId: projectId.value })
  dutyList.value = data
}

const viewRef = ref()

// 预览
const view = () => {
  viewRef.value.open(dataSource)
}
// 节点点击
const handleNodeClick = async (data) => {
  let result = {} as any
  defaultId.value = data.id || ''
  if (data.id) {
    result = await DemandApi.getDemandInfo({ id: data.id })
  } else {
    result = data
  }
  formData.value = {
    ...result,
    name: result.name || data.name,
    status: statusList.value.find((s) => s.value == result?.status)?.label || '',
    developerId: dutyList.value.find((s) => s.value == result?.developerId)?.label || ''
  }
}

/** 初始化 **/
onMounted(() => {
  getList()
  getStatusList()
  getDutyList()
})
</script>

<style scoped lang="scss">
.demand {
  padding: 20px;
  background-color: var(--el-bg-color);
  height: calc(100vh - 175px);
  box-sizing: border-box;

  &-tree {
    justify-content: space-between;
  }
}

.num {
  color: var(--el-color-primary);
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0px 0 0px;
  font-size: 12px;
}

.current {
  display: block;
  background-color: var(--el-color-primary-light-9);
  width: 100%;

  small {
    color: #5e7ce0;
  }
}

:deep(.el-tree) {
  padding: 10px 10px 10px 0;

  .el-tree-node {
    .el-tree-node__content {
      display: flex;
      justify-content: space-between;
    }

    i.el-tree-node__expand-icon {
      svg {
        display: none;
      }
    }

    i.el-tree-node__expand-icon {
      display: none;
    }
  }

  .el-tree-node.is-current {
    .el-tree-node__content {
      small {
        color: #5e7ce0;
      }
    }

    .el-tree-node__children {
      small {
        color: unset;
      }
    }
  }

  /* ^ 树节点 */
  .el-tree-node {
    position: relative;
    width: auto;
    padding-left: 13px;

    &::before {
      width: 1px;
      height: 100%;
      content: '';
      position: absolute;
      top: -38px;
      bottom: 0;
      left: 0;
      right: auto;
      border-width: 1px;
      border-left: 1px solid #b8b9bb;
    }

    &::after {
      width: 13px;
      height: 13px;
      content: '';
      position: absolute;
      z-index: 0;
      left: 0;
      right: auto;
      top: 12px;
      bottom: auto;
      border-width: 1px;
      border-top: 1px solid #b8b9bb;
    }

    .el-tree-node__content {
      position: relative;
      z-index: 1;
      //color: #000;
      padding-left: 0 !important;
    }

    .el-tree-node__children {
      padding-left: 12px;
    }

    &:last-child::before {
      height: 50px;
    }
  }

  > .el-tree-node {
    padding-left: 0;

    &::before {
      border-left: none;
    }

    &::after {
      border-top: none;
    }
  }
}
</style>
